<template>
  <el-dialog
    title="按扭"
    :visible.sync="visible"
    width="800px"
    @close="onClose"
    :close-on-click-modal="false"
    :before-close="closeEditField"
    class="elformBox"
  >
    <el-form
      :model="transitionsForm"
      :rules="transitionsRules"
      ref="transitionsForm"
      label-width="140px"
      size="small"
    >
      <el-form-item label="名称" prop="name">
        <tooltipLable
          slot="label"
          label="名称"
          content="请输入流转的名称"
        ></tooltipLable>
        <el-input v-model="transitionsForm.name"></el-input>
      </el-form-item>
      <one-row>
      <el-form-item label="源状态" prop="source_state_id" >
        <tooltipLable
          slot="label"
          label="源状态"
          content="请选择流转的初始状态，即在哪个状态下出现这个按钮"
        ></tooltipLable>
        <el-select
          v-model="transitionsForm.source_state_id"
          placeholder="请选择"
          class="full-width"
        >
          <el-option
            v-for="item in newStateList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="目标状态" prop="destination_state_id" >
        <tooltipLable
          slot="label"
          label="目标状态"
          content="请选择流转的目标，即点击此流转操作后工单状态的变化"
        ></tooltipLable>
        <el-select
          v-model="transitionsForm.destination_state_id"
          placeholder="请选择"
          class="full-width"
        >
          <el-option
            v-for="item in newStateList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      </one-row>
      <el-form-item label="按扭类型" prop="attribute_type_id">
        <dict-radio dist-key="flow_button_type"  v-model="transitionsForm.attribute_type_id"></dict-radio>
      </el-form-item>
      <el-form-item label="角色显示" prop="show">
        <dict-radio dist-key="flow_show"  v-model="transitionsForm.show"></dict-radio>
      </el-form-item>
        <one-row>
          <el-form-item label="校验必填项" prop="field_require_check" >
            <tooltipLable
              slot="label"
              label="校验必填项"
              content="默认在用户点击操作的时候需要校验工单表单的必填项,如果设置为否则不检查。用于如'退回'属性的操作，不需要填写表单内容"
            ></tooltipLable>
            <el-switch
              v-model="transitionsForm.field_require_check"
              active-text="是"
              inactive-text="否"
            ></el-switch>
          </el-form-item>
          <el-form-item label="排序" prop="no_order" >
            <el-input-number v-model="transitionsForm.no_order" class="full-width"></el-input-number>
          </el-form-item>
        </one-row>
      <one-row>
        <el-form-item label="意见是否必填" prop="is_required" >
          <el-switch
            v-model="transitionsForm.is_required"
            active-text="是"
            inactive-text="否"
          ></el-switch>
        </el-form-item>
        <el-form-item label="选人URL">
          <el-input
            v-model="transitionsForm.select_url"
            placeholder="请输入选人URL"
            style="width:100%"
          ></el-input>
        </el-form-item>
      </one-row>
      <one-row>
        <el-form-item label="选人多选">
          <el-radio-group v-model="transitionsForm.select_checkbox">
            <el-radio :label="true">多选</el-radio>
            <el-radio :label="false">单选</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="选人KEY">
          <el-input
            v-model="transitionsForm.select_key"
            placeholder="请输入选人KEY"
            style="width:100%"
          ></el-input>
        </el-form-item>
      </one-row>
      <one-row>
        <el-form-item label="点击弹窗提示" prop="alert_enable" >
          <tooltipLable
            slot="label"
            label="点击弹窗提示"
            content="可以用于当用户在处理工单时做特定操作时，弹窗提示信息。 如用户点击'拒绝'时弹窗提示要求用户确认是否真的拒绝，避免点错"
          ></tooltipLable>
          <el-switch
            v-model="transitionsForm.alert_enable"
            active-text="是"
            inactive-text="否"
          ></el-switch>
        </el-form-item>
        <el-form-item label="定时器(单位秒)" prop="timer">
          <el-input-number
            v-model="transitionsForm.timer"
            :min="0"
            :max="9999"
            class="full-width"
          ></el-input-number>
        </el-form-item>
      </one-row>
      <el-form-item label="弹窗内容" prop="alert_text">
        <tooltipLable
          slot="label"
          label="弹窗内容"
          content="当开启点击弹窗提示时生效，详情中用户点击操作后弹窗提示的内容"
        ></tooltipLable>
        <el-input v-model="transitionsForm.alert_text"></el-input>
      </el-form-item>
      <el-form-item label="请求接口" prop="get_url">
        <el-input v-model="transitionsForm.get_url" placeholder=""></el-input>
      </el-form-item>
      <el-form-item label="自定义弹框" prop="diy_pop">
        <el-input v-model="transitionsForm.diy_pop" placeholder="配置vue文件路径"></el-input>
      </el-form-item>
      <el-form-item label="标签" prop="label">
        <tooltipLable
                slot="label"
                label="标签"
                content="自定义标签，json格式，调用方可根据标签自行处理特殊场景逻辑"
        ></tooltipLable>
        <el-input v-model="transitionsForm.label"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitTransitions()">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import api from "@/api/index";
import qs from "qs";
import tooltipLable from "@/components/workflows/tooltipLable";
import DictRadio from '../../../../components/DictRadio/index'
export default {
  components: {
    DictRadio,
    tooltipLable
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    row: {
      type: Object,
      default: function() {
        return {};
      }
    }
  },
  data() {
    const checkJson = (rule, value, callback) => {
      try {
        JSON.parse(value);
      } catch (e) {
        //console.log("json 格式错误");
        callback(new Error("json格式错误"));
      }
      callback();
    };
    return {
      transitionsId: null,
      //表单
      transitionsForm: {
        alert_enable: null,
        alert_text: "",
        attribute_type_id: 1,
        condition_expression: "[]",
        destination_state_id: null,
        field_require_check: null,
        name: "",
        source_state_id: null,
        timer: null,
        desc:"",
        label: "{}",
        show:0,
        no_order:0,
        is_required:false,
        select_checkbox:true,
        select_url:"",
        select_key:"",
        get_url:"",
        diy_pop:""
      },
      transitionsRules: {
        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
        source_state_id: [
          { required: true, message: "请选择源状态", trigger: "change" }
        ],
        condition_expression: [
          {
            validator: checkJson,
            message: "格式不正确，需要是字典的的json格式"
          }
        ],
        attribute_type_id: [
          { required: true, message: "请选择属性类型", trigger: "change" }
        ]
      },
      //状态列表
      newStateList: []
    };
  },
  created() {
    this.id = this.$route.query.id;
    this.getState();
  },
  watch: {
    row(val) {
      let data = val;
      if (data.id) {
        this.transitionsId = data.id;
        let obj = {};
        for(let o in this.transitionsForm){
          obj[o] = data[o]
          if(typeof data[o] == "object" ){
            obj[o] = JSON.stringify(data[o])
          }
        }
        this.$nextTick(function() {
          this.transitionsForm = obj;
        });
      } else {
        this.transitionsId = null;
      }
    }
  },
  methods: {
    //获取状态(目标状态和源状态)
    getState() {
      api
        .getAllState(this.id)
        .then(res => {
            this.newStateList = res.data;
        });
    },
    onClose() {
      this.$refs["transitionsForm"].resetFields();
    },
    //关闭编辑字段弹窗
    closeEditField() {
      this.$emit("update:visible", false);
    },
    //提交流转表单
    submitTransitions() {
      this.$refs.transitionsForm.validate(valid => {
        if (valid) {
          if (this.transitionsId != null) {
            api
              .editTransitions(
                this.id,
                this.transitionsId,
                this.transitionsForm
              )
              .then(res => {
                this.msgSuccess("编辑成功!");
                  this.closeEditField();
                  this.$emit("reloadList");
              });
          } else {
            api.addTransitions(this.id, this.transitionsForm).then(res => {
                this.msgSuccess("添加成功!");
                this.closeEditField();
                this.$emit("reloadList");
            });
          }
        } else {
          return false;
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
  ::v-deep.el-radio{
    margin-right: 15px;
  }
</style>
